<template>
  <el-dialog class="fail-detail-dialog" title="失败详情" :visible.sync="dialogVisible" width="50%" :before-close="closeDialog"
    :close-on-click-modal="true">
    <div class="content">
      <p class="title">度量(Metric)名称：<span style="font-weight:bold"> {{ currentFailMetricDisplayName }} </span></p>
      <el-table :data="failDetailTable" tooltip-effect="dark" style="width: 100%" :border="true" height="550"  v-loading="loading" :key="currentFailMetricName + '_id'"
        :header-cell-class-name="headerCellClassName" :cell-class-name="cellClassName">
        <el-table-column prop="ticketId" label="任务ID" width="500px">
        </el-table-column>
        <el-table-column  label="查看日志" width="100px">
          <template slot-scope="scope">
            <div class="change-icon"
              @click="openLog(scope.row.ticketId)">
              <i class="iconfont icon-form"></i>
            </div>
          </template>
        </el-table-column>
           <!-- 案例回放  -->
        <el-table-column label="案例回放" width="100px">
          <template slot-scope="scope">
            <div class="change-icon"
              @click="playVideo(scope.row.ticketId)">
              <i class="iconfont icon-record"></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="recordId" label="失败详情" width="">
          <template slot-scope="scope">
           <el-link type="primary" @click="openReport(scope.row.recordId)">查看</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total,sizes, prev, pager, next" :page-sizes="[10,20, 50, 100]"
          :page-size="pageSize" :current-page.sync="pageIndex" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { getPassFail } from '@/api/report'
import {fetchTaskReport, fetchTaskVideo} from '@/api/task'
export default {
  name: 'FailDetailDialog',
  props: {
    dialogVisible: Boolean,
    currentFailMetricName: String,
    currentFailMetricDisplayName: String,
    sessionId:String
  },
  data() {
    return {
      failDetailTable: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      loading: false
    }
  },
  watch: {
    currentFailMetricName(newVal){
      if(newVal){
        this.getFailData()
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    },
    openReport(task_id){
      fetchTaskReport({task_id}).then(res =>{
        const url = res.addr
        window.open(url, '_blank')
      })
    },
    cellClassName() {
      return 'body-cell-custom'
    },
    headerCellClassName() {
      return 'header-cell-custom'
    },
    getFailData(){
      this.loading = true
      const params ={
        metricName: this.currentFailMetricName,
        sessionId:this.sessionId,
        page_num: this.pageIndex,
        page_size: this.pageSize,
      }
      getPassFail(params).then(res => {
        this.failDetailTable = res.data.result
        this.total = res.data.totalNum    
        this.loading = false
      })
    },
    showOtherMetric(data) {
      if (data && data.length > 0) {
        const resArr = data.map(item => {
          return item.displayName
        })
        return resArr.join(' ')
      } else {
        return ''
      }
    },
    //分页展示表格数据
    handleCurrentChange(val) {
      this.pageIndex = val
      this.getFailData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getFailData()
    },
    // task 日志
    openLog(task_id) {
      this.$router.push({ name: 'TaskLog', params: { taskId: task_id } })
    },
    // 回放播放
    playVideo(task_id) {
      let params = { task_id }
      fetchTaskVideo(params).then(res => {
        if (res.code === 0) {
          const url = res.view_address
          window.open(url, '_blank')
        } else if (res.code === -2) {
          this.$message.warning('资源忙碌，请稍后重试!')
        } else {
          this.$message.error('资源获取失败！')
        }

      })
    },

  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/vars.scss';
  .fail-detail-dialog{
    ::v-deep .el-dialog{
      height: 730px;
    }
    ::v-deep .el-dialog__header {
      padding: 15px 20px;
      background: rgb(242, 243, 248);
      .el-dialog__title{
        padding-left: 10px;
        border-left: 2px solid $primary-color;
        line-height: 24px;
        font-size: 16px;
        color: #303133;
      }
      .el-dialog__headerbtn .el-dialog__close {
        color: #303133;
      }
    }
    ::v-deep .el-dialog__body{
      padding: 20px 20px;
      .title{
        margin-bottom: 20px;
        font-size: 16px;
      }
      .el-table {
        height: 550px !important;
        overflow: auto;
      }
    }
    .change-icon {
      font-size: 20px;
      cursor: pointer;

      .iconfont {
        font-size: 20px !important;

        &:hover {
          color: $primary-hover-color;
        }
      }
    }

  }
</style>